<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>充值统计</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    min-height: 100vh;
    padding: 10px;
    box-sizing: border-box;
  }
  .top {
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    width: 100%;
    height: 25.6586vw;
    background: linear-gradient(270deg, #BBFFFB 0%, #BFE4FF 100%);
    box-sizing: border-box;
  }
  .top-right {
    height: 18.1333vw;
  }
  .top-left {
    color: #191919;
  }
  .top-title {
    font-size: 14px;
    font-weight: 500;
  }
  .top-value {
    font-size: 30px;
    margin-top: 10px;
  }
  .top-value span {
    font-size: 12px;
    font-weight: 400;
    margin-left: 3px;
  }
  .van-list {
    text-align: center;
    border-left: 1px solid #F0F3FA;
  }
  .pay-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  .t-head {
    background: #EDF0F9;
    color: #364058;
    font-size: 14px;
  }
  .t-head .van-col {
    padding: 10px 0;
    border-right: 1px solid #F0F3FA;
  }
  .t-body {
    font-size: 12px;
  }
  .t-body .van-col {
    padding: 6px 0;
    border-right: 1px solid #F0F3FA;
  }
  .t-body.odd {
    background: #F5F9FF;
  }
  .list-item:not(:last-child) {
    border-bottom: 1px solid #F0F3FA;
  }
  .van-col.name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .total {
    font-size: 12px;
    color: #364058;
    margin-bottom: 8px;
  }
  .date-ipcker {
    margin: 14px 0;
    padding: 5px;
    border: 1px solid #E3E8F6;
  }
  .date-ipcker .van-cell__title {
    font-size: 12px;
  }
}
  </style>
</head>

<body>
  <div id="app">
    <div class="page">
      <div class="top">
        <div class="top-left">
          <div class="top-title">总充值成功金额</div>
          <div class="top-value">{{total}}<span>元</span></div>
        </div>
        <img class="top-right" src="/mobile/img/card-icon-1.png" alt="">
      </div>
      <van-cell class="date-ipcker" :border="false" title="选择日期" :value="date" @click="show = true"></van-cell>
      <van-calendar v-model="show" type="range" @confirm="onConfirm" allow-same-day :min-date="minDate" :max-date="maxDate" safe-area-inset-bottom></van-calendar>
    </div>
    <div class="total">共{{totalCount}}条</div>
    <van-empty v-if="!list.length" image="/mobile/img/empty.png" description="暂无数据"></van-empty>
    <van-list v-else v-model="loading" :finished="finished" @load="getData" :immediate-check="false" safe-area-inset-bottom>
      <van-row class="t-head" type="flex" justify="center">
        <van-col span="5">用户靓号</van-col>
        <van-col span="7">用户昵称</van-col>
        <van-col span="5">充值金额</van-col>
        <van-col span="7">充值时间</van-col>
      </van-row>
      <div v-for="(item, index) in list" :key="index" class="list-item">
        <van-row class="t-body" :class="{odd: index % 2 != 0}" type="flex" justify="center">
          <van-col span="5">{{item.goodNum}}</van-col>
          <van-col span="7" class="name">{{item.userNickname}}</van-col>
          <van-col span="5"><img class="pay-icon" :src="payIcon[item.type]" alt=""><span style="vertical-align: middle;">{{item.money}}</span></van-col>
          <van-col span="7">{{dayjs(item.succeedTime).format('M/D HH:mm:ss')}}</van-col>
        </van-row>
      </div>
    </van-list>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      finished: false,
      token: '',
      list: [],
      page: 1,
      limit: 40,
      date: '',
      show: false,
      minDate: null,
      maxDate: null,
      startDate: null,
      endDate: null,
      total: 0,
      totalCount: 0,
      payIcon: {
        1: '/mobile/img/icon_2.png',
        2: '/mobile/img/icon_wx.png',
        3: '/mobile/img/icon_apple.png'
      }
    },
    created() {
      this.minDate = new Date(dayjs().startOf('year').valueOf())
      this.maxDate = new Date(dayjs().endOf('year').valueOf())
      var today = dayjs().startOf('day')
      var tomorrow = dayjs().add(1, 'day').startOf('day')
      this.startDate = today.format('YYYY-MM-DD HH:mm:ss')
      this.endDate = tomorrow.format('YYYY-MM-DD HH:mm:ss')
      this.date = `${today.format('M月D日')}-${tomorrow.format('M月D日')}`
      
      this.getCount()
      this.getData()
    },
    methods: {
      getData() {
        request.post('/api/pay/pay/w/getOrderRecordList', {
          limit: this.limit,
          page: this.page,
          startSucceedTime: this.startDate,
          endSucceedTime: this.endDate
        }).then(res => {
          console.log(res)
          this.loading = false
          this.totalCount = res.data.totalCount
          if (!res.data.list.length) {
            this.finished = true
            return
          }
          this.list = this.list.concat(res.data.list)
          this.page ++
        })
      },
      initPage () {
        this.page = 1
        this.list = []
      },
      getCount () {
        request.post('/api/pay/pay/w/getOrderStatistics', {
          startSucceedTime: this.startDate,
          endSucceedTime: this.endDate
        }).then(res => {
          console.log(res)
          this.total = res.data.totalMoney
        })
      },
      formatDate(date) {
        return `${date.getMonth() + 1}月${date.getDate()}日`;
      },
      onConfirm(date) {
        const [start, end] = date;
        this.show = false;
        this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        this.startDate = dayjs(start).format('YYYY-MM-DD HH:mm:ss')
        this.endDate = dayjs(end).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.startDate)
        console.log(this.endDate)
        this.initPage()
        this.getCount()
        this.getData()
      },
      
    }
  })
  </script>
</body>

</html>